import React, {Component} from 'react';
import {connect} from "react-redux";
import { Table} from 'antd';


class Comment extends Component {
    constructor(props) {
        super(props);

        this.columns = [
            {
                title: 'id',
                dataIndex: 'id',
                align: 'center',

            },
            {
                title: '评论用户',
                dataIndex: 'comUserName',
                align: 'center',

            },
            {
                title: '发布用户',
                dataIndex: 'createUserName',
                align: 'center',

            },
            {
                title: '评论内容',
                dataIndex: 'content',
                align: 'center',

            },
            {
                title: '评论时间',
                dataIndex: 'createTime',
                align: 'center',

            },
            {
                title: '操作',
                align: 'center',
                render: (_, record) => {
                    return (
                        <div>
                            <a onClick={() => this.del(record)} style={{marginLeft: 2,color:'red'}}>删除</a>
                        </div>
                    )
                }
            }
        ];
    }

    componentDidMount() {
       this.props.list({page:1,size:10});
    }

    query = (current, pageSize) => {
        this.props.list({ page: current, size: 10 })
    }
    del = (record) => {
        const {data} = this.props
        this.props.del({id: record.id}).then(res => {
            this.props.list({page:data.current,size:10})
        })
    };


    render() {
        const {data} = this.props;
        const pagination = {
            current: data.current,//当前页
            total: data.total,//总条数
            pageSize: data.size,//页大小
            onChange: this.query,
            showQuickJumper: true,//快速跳转
            showSizeChanger: false//大于50时显示pageSize切换器
        };
        return (
            <div>
                <Table columns={this.columns}  dataSource={data.records}
                       rowKey={record => record.id} pagination={pagination}/>
            </div>

        );
    }
}


const mapState = state => ({
    ...state.circleComment
});

const mapDispatch = dispatch => ({
    ...dispatch.circleComment

})

export default connect(mapState, mapDispatch)(Comment);